<template>
  <div class="container">
    <div class="slider-demo-block">
      <span class="demonstration">透明度</span>
      <el-slider v-model="czmAlpha" :min="0" :max="1" :step="0.01" @input="changeCzmAlpha" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">对比度</span>
      <el-slider v-model="czmContrast" :min="0" :max="1" :step="0.01" @input="changeCzmContrast" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">亮度</span>
      <el-slider
        v-model="czmBrightness"
        :min="0"
        :max="1"
        :step="0.01"
        @input="changecCmBrightness"
      />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">色相</span>
      <el-slider v-model="czmHue" :min="0" :max="1" :step="0.01" @input="changeCzmHue" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">饱和度</span>
      <el-slider
        v-model="czmSaturation"
        :min="0"
        :max="1"
        :step="0.01"
        @input="changeCzmSaturation"
      />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">gamma</span>
      <el-slider v-model="czmGamma" :min="0" :max="1" :step="0.01" @input="changeCzmGammae" />
    </div>
  </div>
</template>

<script setup>
import { imageryLayer } from '../utils/initEarthLayers.js'
import { ref } from 'vue'
const czmAlpha = ref(1) //透明度
const czmContrast = ref(1) //对比度
const czmBrightness = ref(1) //亮度
const czmHue = ref(1) //色相
const czmSaturation = ref(1) //饱和度
const czmGamma = ref(1) //gamma
//透明度
const changeCzmAlpha = (value) => {
  imageryLayer.value.czmAlpha = value
}

//对比度
const changeCzmContrast = (value) => {
  imageryLayer.value.czmContrast = value
}
//亮度
const changecCmBrightness = (value) => {
  imageryLayer.value.czmBrightness = value
}
//色相
const changeCzmHue = (value) => {
  imageryLayer.value.czmHue = value
}
//饱和度
const changeCzmSaturation = (value) => {
  imageryLayer.value.czmSaturation = value
}
//gamma
const changeCzmGammae = (value) => {
  imageryLayer.value.czmGamma = value
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 570px;
  left: 10px;
  background-color: rgba(29, 37, 45, 0.8);
  padding: 20px;
  border-radius: 10px;
  .slider-demo-block {
    .demonstration {
      width: 80px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
    }
    width: 200px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
}
</style>
